<script setup name="login">
import { ref } from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { throttle } from 'lodash';
import { TIME } from '@/constants';
import * as useApi from '@/api/user';
const countDown = ref(TIME);
// 切换显示隐藏
const isActive = ref(true);
const isActiveIndex = ref(0);
const isMessage = ref(true);
const isAccunt = ref(true);
// 路由
const router = useRouter();
const store = useStore();
// // 默认账号密码


const account = localStorage.getItem('account') || '';
const password = localStorage.getItem('password') || '';
const rememberMe = localStorage.getItem('rememberMe === true') || true;
// 定义对象
const loginForm = ref({
  account: rememberMe ? account : '',
  password: rememberMe ? password : '',
  code: '',
  rememberMe,
  isAgree: false,
});

// 登录按钮点击事件
async function login() {
  const res = await store.dispatch('user/login', loginForm.value);
  if (res.success) {
    if (loginForm.value.rememberMe) {
      localStorage.setItem('account', loginForm.value.account);
      localStorage.setItem('password', loginForm.value.password);
      localStorage.setItem('rememberMe', loginForm.value.rememberMe);
    }
    router.push('/');
  } else {
    loginForm.value.password = '';
  }
}
// 进入网站首页
function goHome() {
  router.push('/');
}
// 表单验证
const rules = {
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, message: '长度在 3 到 12 个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' },
  ],
};
function accountLogin() {
  // 点击切换到账号登录
  isActive.value = true;
  isActiveIndex.value = 0;
}
function codelogin() {
  // 点击切换到扫码登录
  isActive.value = false;
  isActiveIndex.value = 1;
}


// 使用短信登录
function loginMessage() {
  isMessage.value = false;
  isAccunt.value = false;
}
// 使用账号密码登录
function isAccount() {
  isMessage.value = true;
  isAccunt.value = true;
}
// 发送验证码
const sendCode = throttle(() => {
  useApi.loginWithCode(loginForm.value.mobile)
    .then((msg) => {
      ElMessage({
        message: msg,
        type: 'success',
      });
    })
    .catch((msg) => {
      ElMessage({
        message: msg,
        type: 'error',
      });
    });
  countDown.value = TIME - 1;
  const timer = setInterval(() => {
    countDown.value--;
    if (countDown.value < 1) {
      clearInterval(timer);
      countDown.value = TIME;
    }
  }, 1000);
}, 60 * 1000);

</script>
<template>
  <div class="container">
    <div class="header">
      <div class="left">
        <div class="logo" @click="goHome">
          <img src="../../assets/logo.png">
        </div>
        <span>欢迎登录</span>
      </div>
      <div class="right" @click="goHome">
        进入网站首页
        <div class="btn" >
          <el-icon>
            <DArrowRight />
          </el-icon>
        </div>
      </div>
    </div>
    <div class=" main">
      <div class="login">
        <div class="login-top">
          <div
            :class="isActiveIndex === 0 ? 'isActiveTitle' : 'ActiveTitle'"
            @click="accountLogin">账户登录</div>
          <div
            :class="isActiveIndex === 1 ? 'isActiveTitle' : 'ActiveTitle'"
            @click="codelogin">扫码登录</div>
        </div>
        <div class="login-main" v-if="isActive" >
          <div class="verification" v-if="isMessage">
            <el-button class="btn" @click="loginMessage">
              <el-icon style="vertical-align: -20%;">
                <Message />
              </el-icon>
              使用短信登录
            </el-button>
          </div>
          <!-- 短信登录 -->
          <div class="verification" v-else>
            <el-button class="btn" @click="isAccount">
              <el-icon style="vertical-align: -20%;">
                <User />
              </el-icon>
              使用账号登录
            </el-button>
          </div>

          <div class="login-input" v-show="true" v-if="isAccunt">
            <el-form :model="loginForm" :rules="rules">
              <el-form-item prop="account" >
                <el-input
                  v-model="loginForm.account"
                  class="w-50 m-2"
                  size="large"
                  placeholder="请输入账号"
                  :prefix-icon="User"
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="loginForm.password"
                  class="w-50 m-2"
                  size="large"
                  placeholder="请输入密码"
                  :prefix-icon="Lock"
                  type="password"
                />
              </el-form-item>
            </el-form>
          </div>
          <div class="login-input" v-show="true" v-else>
            <el-form :model="loginForm" :rules="rules">
              <el-form-item prop="account" >
                <el-input
                  v-model="loginForm.account"

                  size="large"
                  placeholder="请输入手机号"
                  :prefix-icon="User"
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="loginForm.password"
                  class="w-50 m-2"
                  size="large"
                  placeholder="请输入验证码"
                  :prefix-icon="Lock"
                  type="password"
                >
                  <template #append>
                    <el-button
                      @click="sendCode"
                      :disabled="countDown !== 60"
                    >
                      {{ countDown === 60 ? '发送验证码' : countDown }}
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="agree">
            <el-checkbox
              v-model="loginForm.rememberMe"
              label="记住我"
              size="large"
              fill="#27bb9a"
              @click="saveToLocal"
            />
            <el-checkbox
              v-model="loginForm.isAgree"
              text-color="red"
              size="large"
            >
              我已同意
              <a href="">《隐私条款》</a>
              和
              <a href="">《服务条款》</a>
            </el-checkbox>
          </div>
          <el-button
            @click="login"
            :disabled="!loginForm.isAgree"
            type="primary"
            class="login-btn"
          >
            登录
          </el-button>
          <div class="login-down">
            <a>免费注册</a>
            <a>忘记密码</a>
          </div>
        </div>
        <div v-else class="code">
          <div>
            <img src="../../assets/二维码.jpg">
          </div>
          <div>打开<span>小兔鲜App</span>扫码登录</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="serve">
        <div>关于我们</div>
        <div>帮助中心</div>
        <div>售后服务</div>
        <div>配送与验收</div>
        <div>商务合作</div>
        <div>搜索推荐</div>
        <div>友情链接</div>
      </div>
      <div class="copy">
        <span>CopyRight© </span>
        <span>小兔鲜儿</span>
      </div>
    </div>
  </div>
</template>

<style scope lang="scss">

.container{
  display: grid;
  grid-template-rows: 1fr 3fr 1fr;
  .header {
    height: 160px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      width: 350px;
      // outline: 1px solid red;
      display: flex;
      // align-items: center;
      margin-left: 150px;
      .logo {
        cursor: pointer;
        width: 200px;
        img {
          width: 100%;
        }
      }
      span {
        margin-top: 40px;
        font-size: 25px;
        margin-left: 15px;
        color: #756666;
      }
    }
    .right {
      padding-right: 150px;
      display: flex;
      &:hover{
        cursor: pointer;
      }
      .btn{
        color: $green;
        margin-top: 3px;
      }
    }
  }
  .main {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    background: url(../../assets/登录背景图.png) no-repeat 50%/cover;
    .login{
      width: 400px;
      height: 400px;
      // outline: 1px solid red;
      background-color: #ffffff;
      float: right;
      margin-right: 250px;
      .isActiveTitle{
        cursor: pointer;
        color: $green;
      }
      .ActiveTitle{
        cursor: pointer;
        color:black;
      }
      .code{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        div:last-child{
          margin-top: 15px;
          margin-bottom: 100px;
        }
        span{
          color:$green;
        }
      }
      .login-top{
        display: flex;
        font-size: 20px;
        flex-direction: row;
        justify-content: space-between;
        // margin:0 50px;
        padding:15px 50px;
        border-bottom: 1px solid #ccc;
      }
      .login-main{
        // outline:1px solid red;
        padding:0 50px;
        .verification{
          display:flex;
          align-items: center;
          flex-direction: row-reverse;
          margin-top:10px;
          .btn{
            color: $green;
            border: none;
            background-color: #ffffff;
            // background-color: #ffffff;

          }
        }
        .input:focus{
          border: 1px solid green;
        }
        .login-input{
          margin:20px 0 ;
          .input2{
            margin-top:30px;
          }
        }
        .agree{
          // margin:20px 0;
          .el-checkbox{
            height:0;
            --el-checkbox-checked-input-border-color:#27ba9b;
            --el-checkbox-checked-bg-color: none;
            --el-checkbox-checked-icon-color:#27ba9b;
            --el-checkbox-checked-text-color: #27ba9b;
          }
        }
        .login-btn{
          width: 100%;
          height: 40px;
          background: #27ba9b;
          border: none;
          color: #fff;
        }
        .login-down{
          margin-top: 20px;
          display: flex;
          flex-direction: row-reverse;
          &>a{
            margin:0 10px;
            color: #9a9aad;
          }
        }
      }
    }
  }
  .footer {
    // outline: 1px solid red;
    text-align: center;
    color:#9a9aad;
    .serve{
      box-sizing: border-box;
      height: 20px;
      display: flex;
      justify-content: center;
      & > div{
        height: 16px;
        margin-top:30px;
        padding: 2px  10px;
        border-right: 1px solid #ccc;
      }
      div:last-child{
        border-right: none;
      }
    }
    .copy{
      margin-top: 50px;
    }
  }
}
</style>
